<template>
  <ion-page>
  </ion-page>
</template>
 
<script setup>
import service from '@/api/api';
import { Plugins } from '@capacitor/core';
import {  IonPage } from '@ionic/vue';
import { onMounted,ref,onUnmounted,watch } from 'vue';
const { App } = Plugins;
const appState = ref('');
const { LocalNotifications } = Plugins;
const info = ref('');
onMounted(() => {
  App.addListener('appStateChange', handleAppStateChange);
});
 
onUnmounted(() => {
  App.removeAllListeners();
});
 
function handleAppStateChange(state) {
  if (state.isActive) {
    appState.value = 'in foreground';
  } else {
    appState.value = 'in background';
    watch(info, async (newInfo, oldInfo) => {
      if (newInfo !== oldInfo) {
        await LocalNotifications.schedule({
          title: 'new message',
          body: info.value,
          notifyId: 1,
          schedule: { at: new Date() }
        });
      }
}, { immediate: true });
  }
}


onMounted(() => {
  const intervalId = setInterval(async () => {
    try{
      const response=service.post('/alertApi/getAlerts',{length:'1'})
      info.value = response.data.data.list;
    }
    catch(error) {
      console.error('Error fetching data:', error);
    }
  }, 5000);

  // 清理轮询
  onUnmounted(() => {
    clearInterval(intervalId);
  });
 });
 
</script>
 
<style scoped>
/* 样式内容省略 */
</style>


